<template>
  <div>
    <BarChart
      v-loading="loading"
      :key="keyChart"
      :optionData="optionData"
    ></BarChart>
    <div>
      <el-button @click="dataList" type="primary">加载数据</el-button>
    </div>
  </div>
</template>
<script>
import BarChart from "../../components/BarChart.vue";
export default {
  components: {
    BarChart,
  },
  data() {
    return {
      loading: false,
      keyChart: 0,
      optionData: {
        title: {
          text: "条形图",
          left: "left", // 位置: left center right
        },
        legendData: [],
        toolbox: true,
        xAxisData: [],
        seriesData: [],
      },
      // 数据格式
      legendData2: ["类别一", "类别二", "类别三"],
      xAxisData2: ["2014", "2015", "2016"],
      seriesData2: [
        {
          name: "类别一",
          type: "bar",
          data: [301, 334, 390],
        },
        {
          name: "类别二",
          type: "bar",
          data: [191, 234, 290],
        },
        {
          name: "类别三",
          type: "bar",
          data: [201, 154, 190],
        },
      ],
    };
  },
  mounted() {
    this.dataList();
  },
  methods: {
    dataList() {
      this.loading = true;
      new Promise((r, e) => {
        setTimeout(() => {
          // 模拟后台返回的数据
          let data = [
            {
              year: "2014",
              name1: "类别一",
              name1num: "301",
              name2: "类别二",
              name2num: "191",
              name3: "类别三",
              name3num: "201",
            },
            {
              year: "2015",
              name1: "类别一",
              name1num: "334",
              name2: "类别二",
              name2num: "234",
              name3: "类别三",
              name3num: "154",
            },
            {
              year: "2016",
              name1: "类别一",
              name1num: "390",
              name2: "类别二",
              name2num: "290",
              name3: "类别三",
              name3num: "190",
            },
          ];
          r(data);
        }, 1000);
      }).then((data) => {
        let years = [];
        let seriesData = [];
        let legendData = [data[0].name1, data[0].name2, data[0].name3];
        this.optionData.legendData = legendData;
        let num1 = [];
        let num2 = [];
        let num3 = [];
        data.forEach((e) => {
          years.push(e.year);
          num1.push(e.name1num);
          num2.push(e.name2num);
          num3.push(e.name3num);
        });
        let nums = [num1, num2, num3];
        legendData.forEach((e, i) => {
          let obj = {
            name: e,
            type: "bar",
            data: nums[i],
          };
          seriesData.push(obj);
        });
        this.optionData.seriesData = seriesData;
        this.optionData.xAxisData = years;
        // 如果遇到加载数据试图没有更新
        // 可在赋值最后添加下面的代码 改变keyChart的值 使用key值强制刷新
        // 涉及到父组件与子组件 生命周期执行顺序的问题
        this.keyChart = this.keyChart + 1;
        this.loading = false;
      });
    },
  },
};
</script>